import { useState } from 'react';
import Portal from '@mui/material/Portal'
import SearchComponent from "../Search";
import MobilePopover from './MobilePopover';
import useClientDocument from '@/hooks/useClientDocument';

// 还有在SSR下的use client指令也会影响控制台输出导致打包速度下降
const MobileRightNav: React.FC = () => {
  const [open, setOpen] = useState(false);
  const [searchOpen, setSearchOpen] = useState(false);

  // fix ssr mode error: document not defined
  const doc = useClientDocument()

  return (
    <>
      <Portal container={doc?.body}>
        <SearchComponent open={searchOpen} handleClose={() => setSearchOpen(false)} />
      </Portal>
      <div className="absolute top-0 left-0 w-[calc(100vw-2.2rem)] h-full md:hidden">
        <div
          className={`absolute top-1/2 left-[2px] -translate-y-1/2 
          flex flex-col justify-between w-8 h-8 px-2 py-[9px] rounded-full
          transition cursor-pointer
          ${open ? 'bg-white/20' : 'bg-transparent'}
          `}
          onClick={() => setOpen(!open)}
        >
          <i className="w-full h-[2px] bg-white"></i>
          <i className="w-full h-[2px] bg-white"></i>
          <i className="w-full h-[2px] bg-white"></i>
        </div>
        <div className="flex items-center absolute right-0 h-full md:hidden cursor-pointer" onClick={() => setSearchOpen(true)}>
          <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path d="M1005.312 914.752l-198.528-198.464A448 448 0 1 0 0 448a448 448 0 0 0 716.288 358.784l198.4 198.4a64 64 0 1 0 90.624-90.432zM448 767.936A320 320 0 1 1 448 128a320 320 0 0 1 0 640z" fill="#fff"></path></svg>
        </div>
      </div>
      <MobilePopover open={open} setOpen={setOpen} />
    </>
  )
}

export default MobileRightNav